<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight-.91+'rem'}">
      <div class="empty" v-if="orderList.length<1">
         <img src="../../../../static/img/orderNo.png" alt="">
         <p>暂无订单喔~</p>
      </div>
      <div class="boxWrap" v-if="orderList.length>=1">
         <div class="box" v-for="(x,y) in orderList">
            <div class="box-h">
               <div class="box-img" @click="shopInfo(x.goods_list[0].store_id)">
                  <img :src="$store.state.imgurlApi+x.door_photo_image" alt="">
                  <p>{{x.nickname}}</p>
                  <img src="../../../../static/img/yj11.png" alt="">
               </div>
               <p>待付款</p>
            </div>
            <div class="item" v-for="(n,m) in x.goods_list.slice(0,3)">
               <img :src="$store.state.imgurlApi+n.image" alt="">
               <div class="item-r">
                  <div class="item-h">
                     <p><img src="../../../../static/img/zhe_1.png" alt=""><span>{{n.title}}</span></p>
                     <p><span>￥{{n.original_price}}</span>￥{{n.price}}</p>
                  </div>
                  <!--<p><span>x</span>{{JSON.parse(x.product_id)[m].number}}</p>-->
                  <p><span v-for="p in JSON.parse(x.product_id)[m].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(x.product_id)[m].number}}
                  </p>
               </div>
            </div>
            <el-collapse-transition>
               <div v-show="showList[y].look">
                  <div class="transition-box">
                     <div class="item" v-for="(u,i) in x.goods_list.slice(3,)">
                        <img :src="$store.state.imgurlApi+u.image" alt="">
                        <div class="item-r">
                           <div class="item-h">
                              <p><img src="../../../../static/img/zhe_1.png" alt=""><span>{{u.title}}</span></p>
                              <p><span>￥{{u.original_price}}</span>￥{{u.price}}</p>
                           </div>
                           <p><span v-for="p in JSON.parse(x.product_id)[i+3].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(x.product_id)[i+3].number}}
                           </p>
                           <!--<p><span>x</span>{{JSON.parse(x.product_id)[i].number}}</p>-->
                        </div>
                     </div>
                  </div>
               </div>
            </el-collapse-transition>
            <p @click="showLook(y)" class="xjt" v-show="x.goods_list.length>3">
               <img :src="showList[y].look?'../../static/img/sjt111.png':'../../static/img/xiajiantou11.png'" alt=""><span>{{showList[y].look?'收起':'展开更多'}}</span>
            </p>
            <div class="box-bot">
               <p>共{{shopNumber(JSON.parse(x.product_id))}}件商品，实付<span>￥{{x.total_price}}</span></p>
            </div>
            <div class="box-btn">
               <p @click="Fun('取消订单',x)">取消订单</p>
               <p @click="Fun('去支付',x)">去支付</p>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
    export default {
        name: "ToBePaid",
        data() {
            return {
                orderList: [], // 订单列表
                showList: []
            }
        },
        created() {
            // 请求所有订单列表
            this.$myAxios('index/Order/check', 'post', {
                user_id: this.$myStorage.query(),
                status: 0
            }).then(res => {
                var data = res.data;
                console.log(res.data);
                if (res.data.state == 0) {
                    this.$myNotice('请检查网络~', 1500);
                } else {
                    this.orderList = data;
                    for (var i in this.orderList) {
                        this.showList.push({
                            look: false
                        });
                    }
                    console.log(this.orderList);
                }
            })
        },
        computed: {
            shopNumber() {
                return (data) => {
                    var num = 0;
                    for (var i of data) {
                        num += i.number * 1
                    }
                    return num;
                }
            }
        },
        methods: {
            showLook(y) {
                var arr = [...this.showList];
                arr[y].look = !arr[y].look;
                this.showList = arr;
            },
            shopInfo(id) {
                this.$router.push({
                    name: 'shopInfo',
                    query: {
                        id
                    }
                })
            },
            Fun(type,x){
                if (type == '取消订单') {

                } else {

                }
            }
        },
        watch: {
            orderList() {
                console.log(1)
            }
        }
    }
</script>

<style scoped>

   .box {
      width: 3.53rem;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 .03rem .15rem 0 rgba(4, 0, 0, 0.15);
      border-radius: .07rem .07rem .07rem .07rem;
      margin: .1rem auto;
      padding: 0 .1rem;
   }

   .box-h {
      height: .5rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      border-bottom: .01rem solid #EEEEEE;
   }

   .box-img {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .box-img > p {
      color: #171717;
      max-width: 1.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .15rem;
      font-family: PingFang SC;
      font-weight: bold;
   }

   .box-img > img:nth-child(1) {
      width: .26rem;
      height: .26rem;
      border-radius: 100%;
      margin-right: .12rem;
   }

   .box-img > img:nth-child(3) {
      width: .06rem;
      height: .11rem;
      border-radius: 100%;
      margin-left: .1rem;
   }

   .item {
      width: 100%;
      height: .5rem;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
      margin: .1rem auto;
   }

   .item > img:nth-child(1) {
      width: .5rem;
      height: .5rem;
      border-radius: .03rem;
      margin-right: .1rem;
   }

   .item-r {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-bottom: .02rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }

   .item-h {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
   }

   .item-h > p:nth-child(1) > img {
      width: .16rem;
      height: .16rem;
      margin-right: .1rem;
   }

   .item-h > p:nth-child(1) {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .item-h > p:nth-child(1) > span {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
   }

   .item-h > p:nth-child(2) {
      color: #333333;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: bold;
   }

   .item-h > p:nth-child(2) > span {
      color: #999999;
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      text-decoration: line-through;
      padding-right: .1rem;
   }

   .item-r > p {
      font-size: .14rem;
      color: #666666;
      font-family: PingFang SC;
      font-weight: 500;
   }

   .item-r > p > span {
      font-size: .12rem;
   }

   .box-bot {
      height: .4rem;
      display: flex;
      flex-flow: row;
      justify-content: flex-end;
      align-items: center;
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      border-bottom: .01rem solid #EEEEEE;
   }

   .box-bot > p > span {
      color: #333333;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: bold;
      padding-left: .05rem;
   }

   .box-btn {
      height: .6rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-end;
   }

   .box-btn > p:nth-child(2) {
      padding: 0 .1rem;
      height: .31rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .04rem .11rem 0 rgba(255, 112, 5, 0.4);
      border-radius: .16rem;
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: .31rem;
      margin-left: .25rem;
   }

   .box-btn > p:nth-child(1) {
      padding: 0 .1rem;
      height: .31rem;
      box-sizing: border-box;
      border: .01rem solid #E5E5E5;
      border-radius: .16rem;
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #565656;
      text-align: center;
      line-height: .31rem;
   }

   /* 空状态 */
   .empty {
      padding: .5rem 0;
      width: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
   }

   .empty > img {
      width: 65%;
      margin-bottom: .15rem;
   }

   .empty > p {
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #565656;
   }


   .xjt {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
   }

   .xjt > img {
      width: .12rem;
      height: .07rem;
      margin-right: .1rem;
   }

   .xjt > span {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #C0C0C0;
   }

   .transition-box > div:nth-last-child(1) {
      margin: 0;
   }
</style>
